<%@ page pageEncoding="UTF-8"%>
<%@include file='../../common/common.jsp' %>
<%@include file='../../common/jsVersion.jsp' %>

<!DOCTYPE html >
<html lang="en">
    <head>
    	<script type="text/javascript">
          var contextPath = '${contextPath}';
    	</script>
        <meta charset="utf-8" />
        <title>客户管理</title>
        <script type="text/javascript">
        	$(function(){
        		$('.form_datetime').datetimepicker({
        			 format: "yyyy-mm-dd",//日yyyy-mm-dd hh:ii
        	            autoclose: true,
        	            todayBtn: true,
        	            minView:2,//显示到天设置2、显示到时设置1、显示到分设置0
        	            startView:2,//首先显示的视图
        	            pickerPosition: "bottom-left",
        	            language:'zh-CN'
        		});
        	});
        </script>
</head>
   <body>
    <div class="main-content" id="customerListIndex">
        <div class="nav-list-title">
            <ul class="list-title-crumbs">
                <li>
                  <i class="fa fa-map-marker mainTone"></i>
                  <a class="text">客户列表</a>
                  <i class="fa fa-angle-right"></i>
                </li>
                <li><a class="mainTone">编辑</a></li>
            </ul>
        </div>
        <div class="item-info-surround">
            <h3 class="item-title">查询条件</h3>
            <ul class="exhibition-list">
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">项目名称:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.projectId" v-on:change="initUser()">
                            	
                                <option v-for="(row, index) in projectList" v-bind:value="row.id" >{{row.projectName}}</option>
                                
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">经纪人:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.userCode">
                                <option value="">请选择</option>
                                <option v-for="(row,index) in userGroupList" v-bind:value="row.id">{{row.userName}}</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">意向等级:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.intentionLevel">
                                <option value="">请选择</option>
                                <option v-for="(row,index) in intentionLevelList" v-bind:value="row.key">{{row.value}}</option>
                               
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">客户状态:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.customerStatus">
                                <option value="">请选择</option>
                                <option v-for="(row,index) in customerStatusList" v-bind:value="row.key" >{{row.value}}</option>
                               
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">客户性质:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.customerOrigin">
                                <option value="">请选择</option>
                                <option v-for="(row,index) in customerOriginList" v-bind:value="row.id">{{row.codeName}}</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">首次接触方式:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.ftContactWay">
                                <option value="">请选择</option>
                                 <option v-for="(row,index) in ftContactWayList" v-bind:value="row.id">{{row.codeName}}</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">首次接触日期间:</label>
                        <div class="template-controls">
                            <div class="time-selector">
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control form_datetime" v-model="params.ftContactTimeBefore" name="ftContactTimeBefore"  placeholder="请选择">
                                  <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                              <div class="interval-span">-</div>
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control form_datetime" v-model="params.ftContactTimeAfter" name="ftContactTimeAfter" placeholder="请选择">
                                  <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">最后跟进时间:</label>
                        <div class="template-controls">
                            <div class="time-selector">
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control form_datetime" v-model="params.lastFollowTimeBefore" name="lastFollowTimeBefore" placeholder="请选择">
                                  <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                              <div class="interval-span">-</div>
                              <div class="time-selector-list date form_datetime">
                               
                                <input type="text" class="form-control form_datetime" placeholder="请选择" name="lastFollowTimeAfter" v-model="params.lastFollowTimeAfter">
                                  <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">客户手机查询:</label>
                        <div class="template-controls">
                            <input type="text" class="form-control" v-model="params.customerPhone" placeholder="请输入手机号">
                        </div>
                    </div>
                </li>
              <!--   <li class="col-md-12">
                    <div class="currency-template-query">
                        <label class="template-title">需求面积:</label>
                        <div class="template-controls">
                            <ul class="checkbox">
                                <li v-for="(row,index) in rqDemandAreaList" >
                                    <label>
                                      <input type="checkbox" v-bind:value="row.key" name="check_area"  >{{row.value}}
                                    </label>
                                </li>
                                
                            </ul>
                        </div>
                    </div>
                </li> -->
            </ul>
            <div class="query-operation">
                <div class="fr">
                    <button class="btn">新增</button>
                    <button class="btn" data-toggle="modal" data-target="#myModalThr">批量导入</button>
                    <button class="btn" v-on:click="customerAllInfo(null)">查询</button>
                    <button class="btn" v-on:click="batchDistribution()">批量分配</button>
                    <span>已勾选{{checkboxModelTotal}}条</span>
                    <a href="javascript:;" class="empty">清空</a>
                </div>
            </div>
        </div>
        <div class="item-info-surround">
            <ul class="nav-list-cell" >
              <li v-on:click="tabPage(1)" id="tab_1"  name="tab_p" class="active"><a href="javascript:void(0)">全部（{{alltotal}}）</a><span class="col">|</span></li>
              <li v-on:click="tabPage(2)" id="tab_2"  name="tab_p"><a href="javascript:void(0)">逾期未签约（{{tab_2_total}}）</a><span class="col">|</span></li>
              <li v-on:click="tabPage(3)" id="tab_3"  name="tab_p"><a href="javascript:void(0)">待处理客户（{{tab_3_total}}）</a><span class="col">|</span></li>
              <li v-on:click="tabPage(4)" id="tab_4"  name="tab_p"><a href="javascript:void(0)">待处理客户（{{tab_4_total}}）</a></li>
            </ul>
            <div class="table-responsive">
                <table class="table table-striped table-bordered min-width-1150">
                    <thead>
                        <tr>
                            <th><input type="checkbox" v-on:click="checkedAll()"/></th>
                            <th>客户名称</th>
                            <th>联系电话</th>
                            <th>客户性别</th>
                            <th>客户生日</th>
                            <th>意向等级</th>
                            <th>首次接触方式</th>
                            <th>沟通内容</th>
                            <th>最后跟进内容</th>
                            <th>最后跟进时间</th>
                            <th>跟进次数</th>
                            <th>是否多套交易</th>
                            <th>经纪人</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in customerList">
                            <td><input type="checkbox" v-bind:value="row.id" name="customerCheck"  v-model="checkboxModel"/></td>
                            <td>{{row.customerName}}</td>
                            <td>{{row.customerPhone}}</td>
                            <template>
                              <td v-if="row.customerSex==1">男</td>
                               <td v-if="row.customerSex==2">女</td>
                            </template>
                            <td>{{row.peBirth}}</td>
                            <td>{{row.intentionLevelName}}</td>
                            <td>{{row.ftContactWay}}</td>
                            <td>{{row.ftContactContent}}</td>
                            <td>{{row.followContent}}</td>
                            <td>{{row.lastFollowTime|time}}</td>
                            <td>{{row.followMonth}}</td>
                            <template>
                            	<td v-if="row.customerTradeStatus==4">是</td>
                            	<td v-else>否</td>
                            </template>
                            <td>{{row.userName}}</td>
                            <td>
                                <a href="javascript:void(0)" class="operationBtn">查看</a>
                                <a href="javascript:void(0)" class="operationBtn">编辑</a>
                                <a href="javascript:void(0)" class="operationBtn" v-on:click="showWindow(row.id,'showWindow')">写跟进</a>
                                <a href="javascript:void(0)" class="operationBtn" v-on:click="showGroup(row.projectId,row.id,'showGroup')" >分配</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="pageClass">
        
        </div>
        <!-- 弹出层 -->
        <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  			<form  id="addFollow">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">写跟进</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-eject">
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">跟进方式：</label>
                                <div class="col-sm-9">
                                    <select class="form-control" v-model="addFollow.followMode" name="followMode" >
                                        <option value="">请选择</option>
                                        <option v-for="(row,index) in followModesList" v-bind:value="row.key">{{row.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">跟进内容：</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" v-model="addFollow.followContents" name="followContents" ></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">下次提醒时间：</label>
                                <div class="col-sm-9">
                                    <div class="time-selector">
                                        <div class="time-selector-list date form_datetime">
                                            <input type="text" class="form-control" placeholder="请选择" v-model="addFollow.nextFollowQ" name="nextFollowQ">
                                            <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                                        </div>
                                        <select class="form-control form-control-sm" v-model="addFollow.nextFollowH" name="nextFollowH">
                                            <option value="">请选择</option>
                                          	<option v-for="(row,index) in nextFollowList" v-bind:value="row">{{row}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">下次提醒内容：</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" v-model="addFollow.nextFollowContent" name="nextFollowContent"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn checkedBtn" v-on:click="onSubmit()">确定</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
        <div class="modal fade" id="myModalTwo" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           	<form id="distributionForm">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">分配</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-eject">
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label"><span class="required">*</span>销售组名称：</label>
                                <div class="col-sm-9">
                                    <select class="form-control" v-model="groupId" name="groupId">
                                        <option value="">请选择</option>
                                        <option v-for="(row,index) in groupList" v-bind:value="row.id">{{row.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label"><span class="required">*</span>经纪人：</label>
                                <div class="col-sm-9">
                                    <select class="form-control" v-model="distributionParams.consultantUserId" name="consultantUserId">
                                        <option value="">请选择</option>
                                        <option v-for="(row,index) in groupUserList" v-bind:value="row.id">{{row.userName}}</option>
                                       
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn checkedBtn" v-on:click="distributionSubmit()">确定</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
        <div class="modal fade" id="myModalThr" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                      <span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">导入</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-eject">
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">导入excel：</label>
                                <div class="col-sm-9">
                                    <input type="file" name="multipartFile" id="multipartFile" enctype="multipart/form-data"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" v-on:click="downEcxel()"><i class="fa fa-cloud-download"></i>模板下载</button>
                      <button type="button" class="btn checkedBtn" v-on:click="importFile()">开始导入</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片查询 -->
        <div class="modal fade" id="myModalFour" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">图片</h4>
                    </div> -->
                    <div class="modal-body">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                          <!-- Wrapper for slides -->
                          <div class="carousel-inner" role="listbox">
                            <div class="item active">
                              <img src="1.jpg" alt="...">
                            </div>
                            <div class="item">
                              <img src="1.jpg" alt="...">
                            </div>
                          </div>
                          <!-- Controls -->
                          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon-carousel"><i class="fa fa-chevron-left"></i></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon-carousel"><i class="fa fa-chevron-right"></i></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div> 
</body>
<script type="text/javascript" src="${contextPath}/static/optimization/js/customer/list.js?v=${jsVersion}"></script>
</html>
